<template>
  <div class="specialLocal-product" style="100%;">
    <div class="product-detail-wrapper-top">
      <v-header
        :fixed="true"
        :opacity="opacity"
        ref="header"
        :handleClick="true"
        @back="quitEdit">
        <div slot="main" class="productTabBck">
          <tab class="tabItemMarg" active-color="#fff" default-color="#fff" :line-width="7">
            <tab-item
              :selected="index === num"
              style="font-size:16px;"
              v-for="(item,index) in tabList"
              active-class="tabFontbold"
              :key='index'
              @on-item-click="numChange(index)">
              {{item}}
            </tab-item>
          </tab>
        </div>
        <div slot="right" @click="toShare">
          <!-- <img class="fa-share" src="~@/assets/img/icon/share.png" alt=""> -->
          <i class="icon iconfont icon-share"></i>
        </div>
      </v-header>
    </div>

    <div :style="{marginTop: marginTop + 'px'}">
      <div class="product-list" v-if="num===0">
        <specialLocalProductInfo
          ref="specialLocalProductInfo"
          @moreComment="moreComment"
          @clickMore="clickMore"
          :commentDataList="commentDataList"
          :atlasList="atlasList">
        </specialLocalProductInfo>
      </div>

      <div class="product-list" v-else-if="num===1">
        <specialLocalProductDetail :contentHtml="contentHtml"></specialLocalProductDetail>
      </div>

      <div class="product-list" v-else-if="num===2">
        <specialLocalProductComment
          ref="specialLocalComment"
          :commentDataList="commentDataList"
          @onPullingDown="onPullingDown"
          @onPullingUp="onPullingUp">
        </specialLocalProductComment>
      </div>
    </div>

<!-- 分享 -->
    <!-- <share
      v-model="showShare"
      :title="res.productName"
      :desc="res.productDesc"
      :thumbUrl="res.thumbUrl"
      :linkUrl="APP_DOWNLOAD_PATH">
    </share> -->
    <share
      v-model="showShare"
      :title="res.productName"
      :desc="res.productDesc"
      :thumbUrl="res.thumbUrl"
      :linkUrl="this.$route.path">
    </share>

<!-- 底部购物车 -->
    <div class="shoppingCart">
      <p class="price-wrapper">价格: <span>￥</span><span class="price" v-if="res && res[0]">{{res[0].price}}</span></p>
      <div class="vertical-middle">
        <img :src="Shopping" @click="goToShopping" alt="">
        <p>购物车</p>
        <badge v-if="ShoppingCartCount" class="shoppingBadge" :text="ShoppingCartCount"></badge>
      </div>
      <span class="shoppingTxt" @click.stop="toggleBtn">加入购物车</span>
    </div>

<!-- 立即订购选项 -->
    <div v-transfer-dom class="shoppingCartpopup">
      <popup max-height='80%' v-model="toggle" style="margin-top:70px; background:#fff;" hide-on-deactivated>
        <div class="popupCon">
          <div class="popupTopRight" @click.stop="toggleBtnCantel">
            <icon type="cancel"></icon>
          </div>
          <div class="popupTop" v-if="res && res.length > 0">
            <img class="popupConImg" v-lazy="res[0].thumbUrl" alt="">
            <div class="popupTopLeftCon">
              <span class="popupTopLeftConPrice">¥{{res[0].price}}</span>
              <span class="popupTopLeftConName">{{res[0].name}}</span>
            </div>
          </div>
          <div class="popupNum">
            <x-number title="购买数量" v-model="value" :min="1" width="50px"></x-number>
          </div>
          <div class="btn" @click="sumbitOrder">
            <x-button class="btnPay" :gradients="['#00ceb9', '#1eb7a7']">确认</x-button>
          </div>
        </div>
      </popup>
    </div>

  </div>
</template>

<script type='text/ecmascript-6'>
import Scroll from '@/components/scroll/scroll'
import VHeader from '@/components/v-header/v-header'
import Share from '@/components/share/share'
import { Tab, TabItem, Icon, TransferDom, Popup, XNumber, XButton, Badge } from 'vux'
// import { isIphoneX } from '@/assets/js/brower.js'
import specialLocalProductInfo from '@/pages/cart/cart-page/specialLocal-product/specialLocal-product-tab/specialLocal-product-info/specialLocal-product-info'
import specialLocalProductDetail from '@/pages/cart/cart-page/specialLocal-product/specialLocal-product-tab/specialLocal-product-detail/specialLocal-product-detail'
import specialLocalProductComment from '@/pages/cart/cart-page/specialLocal-product/specialLocal-product-tab/specialLocal-product-comment/specialLocal-product-comment'
import Shopping from '@/assets/img/shopping.png'
import axios from '@/api/axiosApi'
// import { APP_DOWNLOAD_PATH } from '@/api/config'
import { localUser } from '@/assets/js/local'

export default {
  data () {
    return {
      opacity: 1,
      tabList: ['商品', '详情', '评论'],
      showShare: false,
      num: 0,
      marginTop: 0,
      toggle: false,
      Shopping: Shopping,
      res: [],
      // APP_DOWNLOAD_PATH,
      value: 1,
      ShoppingCartCount: '',
      resOther: [],
      commentDataList: [],
      resListIndex: {},
      contentHtml: '',
      atlasList: [],
      atlasListTopImg: ''
    }
  },
  props: {
    productName: {
      type: String,
      default: ''
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Scroll,
    VHeader,
    Share,
    Tab,
    TabItem,
    specialLocalProductInfo,
    specialLocalProductDetail,
    specialLocalProductComment,
    Popup,
    Icon,
    XNumber,
    XButton,
    Badge
  },
  created () {
    this.getSpecialLocalCommentListAll()
    this.pageNum = 1
    this.pageSize = 10
  },
  mounted () {
    this.marginTop = this.$refs.header.$el.offsetHeight
    this.getShoppingCartCount()
    this.getDetaliList()
    this.$nextTick(() => {
      this.getSpecialLocalCommentList()
    })
    this.getBannerTe()
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'SpecialLocalProductDetail') {
        this.getSpecialLocalCommentListAll()
        this.getDetaliList()
        this.getBannerTe()
      }
    }
  },
  methods: {
    toShare() {
      this.showShare = true
    },
    numChange (index) {
      this.num = index
    },
    toggleBtn () {
      const user = localUser.get()
      if (user == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        setTimeout(() => {
          this.$router.push('/login')
        }, 200)
      } else {
        this.toggle = true
      }
    },
    toggleBtnCantel () {
      this.toggle = false
    },
    goToShopping () {
      const user = localUser.get()
      if (user == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        setTimeout(() => {
          this.$router.push('/login')
        }, 200)
      } else {
        this.$router.push('/user/shoppingcart')
      }
    },
    moreComment (num) {
      this.num = num
    },
    getSpecialLocalCommentList () {
      let param = {
        target_type: 2,
        id: this.$route.params.id
      }
      axios.get(this, '/v1/featureProduct/', param, (res) => {
        console.log(res)
        this.res = res
      })
    },
    sumbitOrder () {
      let param = {
        userId: localUser.get('id'),
        goodsId: this.$route.params.id,
        goodsNum: this.value,
        goodsType: '201'
      }
      axios.post(this, '/v1/shoppingCart/', param, (res) => {
        this.$vux.toast.text('成功加入购物车~', 'middle')
        this.ShoppingCartCount = this.ShoppingCartCount + this.value
      })
      this.toggle = false
    },
    getShoppingCartCount () {
      axios.get(this, `/v1/shoppingCartCount/${localUser.get('id')}`, null, (ShoppingCartCount) => {
        if (ShoppingCartCount) {
          this.ShoppingCartCount = ShoppingCartCount
        }
      })
    },
    clickMore (params) {
      this.res[0].thumbUrl = params.thumbUrl
      this.res[0].price = params.price
      this.res[0].name = params.name
      this.res[0].id = params.goodId
      this.value = 1
      this.getSpecialLocalCommentListAll()
      this.getShoppingCartNum()
    },
    // 评论块数据获取
    getSpecialLocalCommentListAll () {
      axios.get(this, `/v1/featureRecord/${this.$route.params.id}`, {pageNum: this.pageNum, pageSize: this.pageSize}, (commentData) => {
        this.commentDataList = []
        if (commentData.length === 0) {
          if (this.pageNum === 1) {
            // this.commentData = []
            if (this.$refs.specialLocalComment) {
              this.$refs.specialLocalComment.$refs.specialLocalComment.hiddenPullDown()
            }
          } else {
            this.pageNum--
            if (this.$refs.specialLocalComment) {
              this.$refs.specialLocalComment.$refs.specialLocalComment.hiddenPullUpLoad()
            }
          }
        } else {
          if (this.pageNum > 1) {
            this.commentDataList = this.commentDataList.concat(commentData)
          } else {
            this.commentDataList = commentData
          }
        }
      })
    },
    onPullingUp () {
      this.pageNum++
      this.getSpecialLocalCommentListAll()
    },
    onPullingDown () {
      this.pageNum = 1
      this.getSpecialLocalCommentListAll()
    },
    getDetaliList () {
      let param = {
        target_type: 2,
        id: this.$route.params.id
      }
      axios.get(this, '/v1/featureProduct/', param, (item) => {
        axios.get(this, `/v1/contentDesc/${item[0].contentId}`, null, (getDetaliList) => {
          this.contentHtml = getDetaliList.contentHtml
        })
      })
    },
    getShoppingCartNum () {
      axios.get(this, '/v1/shoppingCartNum/', {
        userId: localUser.get('id'),
        goodsId: this.res[0].id
      }, (res) => {
        if (res) {
          this.value = res.goodsNum
        } else {
          this.value = 1
        }
      })
    },
    quitEdit () {
      if (this.num !== 0) {
        this.num = 0
      } else {
        window.history.go(-1)
      }
    },
    // banner数据获取
    getBannerTe () {
      let param = {
        target_type: 2,
        id: this.$route.params.id
      }
      axios.get(this, '/v1/featureProduct/', param, (atlasList) => {
        if (atlasList !== '') {
          atlasList.forEach(item => {
            item.atlas = item.atlas.split(';')
          })
          let temp = []
          atlasList[0].atlas.forEach((img, i) => {
            temp.push({
              src: img
            })
          })
          this.atlasList = temp
          this.atlasListTopImg = this.atlasList[0].src
        }
      })
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'

.product-detail-wrapper-top{}

.specialLocal-product{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  background-color: $color-background;
  z-index: 99;
  .product-list {
    text-align center
    img {
      margin 0 10px
    }
  }
  .tabItemMarg{
    display flex
    justify-content space-around
  }
  .fa-share{
    width 24px
    height 22px
    padding-top 4px
  }
  .tabFontbold{
    font-weight bolder !important
  }
}
.shoppingCart{
  width 100%
  height 60px
  display flex
  align-items center
  justify-content space-between;
  position fixed
  bottom 0
  z-index 1008
  background #fff
  border-top 1px solid #e2e2e2
  .price-wrapper {
    width: calc(100% - 207px)
    font-size: 14px;
    color: #333;
    padding-left: 16px;
    span {
      font-size: 18px;
      color: $color-theme;
    }
    .price {
      font-size: 24px
    }
  }
  .vertical-middle {
    position: relative ;
    width: 66px;
    min-width: 66px;
    text-align: center;
    border-left: 0.5px solid #e2e2e2;
    font-size: 11px;
    color: #666;
    height: 100%;
    line-height 1;
    img{
      height 24px;
      margin-top: 12px;
      margin-bottom: 4px;
    }
    .shoppingBadge {
      position absolute
      top: 5px;
      right: 8px;
    }
  }
  .shoppingTxt{
    min-width: 140px;
    width 140px
    height 60px
    line-height 60px
    text-align center
    background $color-theme
    color #fff
    font-size 17px
  }
}
.shoppingCartpopup{
  z-index 1010
  position relative
}
.shoppingCartpopup {
  .popupCon {
    padding 60px 0 60px 0
    .popupTop {
      display flex
      background #fff
      padding 10px
      box-shadow 0 0 16px lightgray
      .popupConImg {
        width 90px
        height 90px
        margin-right 30px
      }
      .popupTopLeftCon {
        display flex
        flex-direction column
        .popupTopLeftConPrice {
          font-size 30px
          color $color-theme
          margin-bottom 10px
        }
      }
    }
    .popupTopRight {
      position absolute
      top 10px
      right 20px
    }
    .popupNum {
      margin 20px 0
    }
  }
}
.btn {
  width 100%
  position absolute
  bottom 10px
  .btnPay {
    width 80%
  }
}
</style>
